<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .ad {
            position: fixed;
            right: 0;
            bottom: 0;
            width: 200px;
            height: 200px;
            background: #eee;
        }

        .close {
            float: right;
            cursor: pointer;
        }
    </style>
</head>
<body>

    <div id="a" class="ad">
        <span id="c" class="close">X</span>
        <p>
            <strong id="time">10</strong>
            s之后自动关闭
        </p>

    </div>

    <script>

        // 广告  

        //    1 广告一开始就在  点击x关闭   倒计时关闭

        //    2 广告一开始没有  过了一段时间之后才出现，点击x关闭   倒计时关闭   关闭以后一段时间又出现   递归

        //    3 一开始就有  点击x关闭   倒计时关闭  关闭之后一段时间又出来  递归


        //  第三种小广告
        var oClose = document.getElementById('c');
        var oAd = document.getElementById('a');
        var oTime = document.getElementById('time');
        closeAd() ;

        function closeAd() {
            // 点X关闭
            oClose.onclick = function() {
                oAd.style.display = 'none' ;
                // 点X关闭时需要清除定时器
                clearInterval(t) ;
                setTimeout(function(){
                    oAd.style.display = 'block' ; 
                    oTime.innerHTML = 10 ;
                    closeAd() ;
                } , 1000)
            }

            // 倒计时关闭
            var t = setInterval(function(){
                oTime.innerHTML-- ;
                if(oTime.innerHTML == 0) {
                    clearInterval(t) ;
                    oAd.style.display = 'none' ;
                    setTimeout(function(){
                        oAd.style.display = 'block' ; 
                        oTime.innerHTML = 10 ;
                        closeAd() ;
                    } , 1000)
                }
            } , 500)
       }


    </script>
    
</body>
</html>